<template>
  <div class="Chief-Four" chief-style-set>
    <Title title="经营数据" more :MoreUrl='MoreJump(this, "OperatingCondition", 1)'></Title>
    <div class="content-h-auto" chief-style-set>
      <Charts :pChartsOption="ChartsOption"></Charts>
    </div>
  </div>
</template>

<script>
import Title from "@/components/baseTitle";
import Charts from "@/components/portalEcharts/BarEcharts";
import { rptVisPrjManage } from "@/api/portalChief";
import { MoreJump } from "@/util/util";
export default {
  name: "Chief-Four",
  components: {
    Title, Charts
  },
  data () {
    return {
      ChartsOption: {},
      MoreJump
    };
  },
  created () {
    rptVisPrjManage(this.$store.state.user.project.projectNo).then(res => {
      this.disposeData(res);
    });
  },
  methods: {
    disposeData (res) {
      if (res.status === 200 && res.data.code === 0 && res.data.data.length > 0) {
        this.ChartsOption = {
          xAxisNameList: ["目标", "上年同期", "实际"],
          BarList: [
          ],
          needLine: true,
          LineList: [
          ]
        };
        let colorList = ["#5A9BD5", "#4473C5", "#A5A5A5", "#FFC001"];
        let list = res.data.data;
        if (list.length > 0) {
          list.forEach((item, index) => {
            if (item.name !== "洗选率") {
              this.ChartsOption.BarList.push({
                name: item.name,
                color: colorList[index],
                data: Object.values(item.data)
              });
            } else {
              Object.keys(item.data).forEach((Item, i) => {
                Number(item.data[Item] = item.data[Item].split("%")[0]);
              });
              this.ChartsOption.LineList.push({
                name: item.name,
                data: Object.values(item.data)
              });
            }
          });
        } else {
          this.ChartsOption = {};
        }
      } else {
        this.ChartsOption = {};
      }
    }
  }
};
</script>